<template>
    <el-col class="border padd20">
        <CurrentDate title="劳动风采数据图" />
        <div id="main3" class="echarts" style="width: 100%;height:180px;min-height: 150px;" v-if="echartData.length!=0"></div>
        <el-col  class="box box-align-center box-pack-center" style="width: 100%;height: 150px;" v-else>暂无数据</el-col>
    </el-col>
</template>

<script>
    import * as echarts from 'echarts';
    import CurrentDate from "./CurrentDate.vue";
    export default {
        components: {
            CurrentDate
        },
        props:{
            echartData:{
                type:Array,
                default:[]
            }
        },
        data() {
            return {
                // newData:this.echartData
            }
        },

        methods: {
            init() {
                console.log(">>>>>>>>>>>>");
                console.log(this.echartData);
                var newData = this.echartData;

                var chartDom = document.getElementById('main3');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    xAxis: {
                        type: 'category',
                        data: newData.map(res=>{return res.date})
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: newData.map(res=>{return res.cnt}),
                        type: 'line',
                        smooth: true
                    }]
                };

                option && myChart.setOption(option);
                window.addEventListener("resize", () => {
                    if (myChart) {
                        myChart.resize()
                    }
                })
                window.onresize = myChart.resize;
            }
        }
    }
</script>
<style scoped>
    @import './com.scss';
</style>
<style scoped>
    .echarts{
        /* height: 150px; */
    }
</style>
